<template>
  <div class="media-management">
    <el-card shadow="never">
      <el-table :data="mediaList" style="width: 100%">
        <el-table-column prop="resourceId" label="ID" width="80"></el-table-column>
        <el-table-column prop="contentId" label="内容ID" width="100"></el-table-column>
        <el-table-column label="资源类型" width="120">
          <template #default="{ row }">
            <el-tag v-if="row.resourceType === 1">图片</el-tag>
            <el-tag v-else-if="row.resourceType === 2" type="success">视频</el-tag>
            <el-tag v-else type="info">音频</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="资源预览">
          <template #default="{ row }">
            
            <img 
              v-if="row.resourceType === 1" 
              :src="row.url" 
              style="max-width: 100px; max-height: 60px;"
              alt="图片预览"
            />
            <video 
              v-else-if="row.resourceType === 2" 
              :src="row.url" 
              style="max-width: 100px; max-height: 60px;"
              controls
            ></video>
            <span v-else>音频文件</span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小" width="120">
          <template #default="{ row }">
            {{ formatSize(row.size) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.resourceId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑媒体资源">
      <el-form :model="currentMedia" label-width="120px">
        <el-form-item label="资源类型">
          <el-select v-model="currentMedia.resourceType" disabled>
            <el-option :value="1" label="图片"></el-option>
            <el-option :value="2" label="视频"></el-option>
            <el-option :value="3" label="音频"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="currentMedia.url"></el-input>
        </el-form-item>
        <el-form-item label="缩略图URL">
          <el-input v-model="currentMedia.thumbnailUrl"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentMedia.description" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateMedia">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getMediaList, deleteMedia, updateMedia } from '@/api/media';

export default {
  setup() {
    const mediaList = ref([]);
    const editDialogVisible = ref(false);
    const currentMedia = ref({
      resourceId: null,
      resourceType: 1,
      url: '',
      thumbnailUrl: '',
      description: ''
    });
    
    // 获取媒体资源列表
    const fetchMedia = async () => {
      const res = await getMediaList();
      mediaList.value = res.data.data;
    };
    
    // 格式化文件大小
    const formatSize = (bytes) => {
      if (bytes < 1024) return bytes + ' B';
      else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
      else return (bytes / 1048576).toFixed(1) + ' MB';
    };
    
    // 打开编辑对话框
    const handleEdit = (media) => {
      currentMedia.value = { ...media };
      editDialogVisible.value = true;
    };
    
    // 更新媒体资源
    const updateMediaItem = async () => {
      await updateMedia(currentMedia.value);
      ElMessage.success('媒体资源更新成功');
      editDialogVisible.value = false;
      fetchMedia();
    };
    
    // 删除媒体资源
    const handleDelete = (id) => {
      ElMessageBox.confirm('确定要删除这个媒体资源吗？', '警告', {
        type: 'warning'
      }).then(async () => {
        await deleteMedia(id);
        ElMessage.success('媒体资源删除成功');
        fetchMedia();
      }).catch(() => {});
    };

    onMounted(() => {
      fetchMedia();
    });

    return {
      mediaList,
      editDialogVisible,
      currentMedia,
      formatSize,
      handleEdit,
      updateMedia: updateMediaItem,
      handleDelete
    };
  }
};
</script>